<!DOCTYPE html>
<html>
<head>
    <title>Fig. 1.32 Reproduction</title>
</head>
<body>
    <canvas id="canvas" width="600" height="520"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        
        // Geometric parameters
        const largeCenter = { x: 370, y: 250 };
        const largeRadius = 180;
        const centerOffset_c = 100;
        const smallCenter = { x: largeCenter.x - centerOffset_c, y: largeCenter.y };
        const smallRadius = 80;

        // --- Draw Main Shapes ---

        // Large circle
        ctx.beginPath();
        ctx.arc(largeCenter.x, largeCenter.y, largeRadius, 0, 2 * Math.PI);
        ctx.stroke();

        // Small circle
        ctx.beginPath();
        ctx.arc(smallCenter.x, smallCenter.y, smallRadius, 0, 2 * Math.PI);
        ctx.stroke();

        // Horizontal line (axis)
        ctx.beginPath();
        ctx.moveTo(largeCenter.x - largeRadius - 10, largeCenter.y);
        ctx.lineTo(largeCenter.x + largeRadius, largeCenter.y);
        ctx.stroke();

        // Center points
        ctx.beginPath();
        ctx.arc(largeCenter.x, largeCenter.y, 4, 0, 2 * Math.PI);
        ctx.fill();
        ctx.beginPath();
        ctx.arc(smallCenter.x, smallCenter.y, 4, 0, 2 * Math.PI);
        ctx.fill();

        // --- Draw Grounding Symbol ---
        const groundAngle = Math.PI / 4.5; // Approx 40 degrees
        const groundStart = {
            x: largeCenter.x + largeRadius * Math.cos(groundAngle),
            y: largeCenter.y + largeRadius * Math.sin(groundAngle)
        };
        const groundCorner = { x: groundStart.x + 20, y: groundStart.y };
        const groundEnd = { x: groundCorner.x, y: groundCorner.y + 40 };
        
        ctx.beginPath();
        ctx.moveTo(groundStart.x, groundStart.y);
        ctx.lineTo(groundCorner.x, groundCorner.y);
        ctx.lineTo(groundEnd.x, groundEnd.y);
        ctx.stroke();

        // Ground bars
        ctx.beginPath();
        ctx.moveTo(groundEnd.x - 25, groundEnd.y);
        ctx.lineTo(groundEnd.x + 25, groundEnd.y);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(groundEnd.x - 18, groundEnd.y + 8);
        ctx.lineTo(groundEnd.x + 18, groundEnd.y + 8);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(groundEnd.x - 11, groundEnd.y + 16);
        ctx.lineTo(groundEnd.x + 11, groundEnd.y + 16);
        ctx.stroke();

        // Set font for variables
        ctx.font = 'italic 22px Times New Roman';

        // --- Draw Triangle and Labels ---
        const angleOnSmallCircle = 1.3; // Radians, ~74.5 deg
        const pointOnSmall = {
            x: smallCenter.x + smallRadius * Math.cos(angleOnSmallCircle),
            y: smallCenter.y - smallRadius * Math.sin(angleOnSmallCircle)
        };

        const angleOnLargeCircle = 0.6; // Radians, ~34.4 deg
        const pointOnLarge = {
            x: largeCenter.x + largeRadius * Math.cos(angleOnLargeCircle),
            y: largeCenter.y - largeRadius * Math.sin(angleOnLargeCircle)
        };

        // Line 'a' (radius of small sphere)
        ctx.beginPath();
        ctx.moveTo(smallCenter.x, smallCenter.y);
        ctx.lineTo(pointOnSmall.x, pointOnSmall.y);
        ctx.stroke();
        const mid_a = { x: (pointOnSmall.x + smallCenter.x) / 2, y: (pointOnSmall.y + smallCenter.y) / 2 };
        const angle_a = Math.atan2(pointOnSmall.y - smallCenter.y, pointOnSmall.x - smallCenter.x);
        ctx.save();
        ctx.translate(mid_a.x, mid_a.y);
        ctx.rotate(angle_a);
        ctx.fillText('a', -5, -8);
        ctx.restore();
        
        // Line 'r'
        ctx.beginPath();
        ctx.moveTo(largeCenter.x, largeCenter.y);
        ctx.lineTo(pointOnSmall.x, pointOnSmall.y);
        ctx.stroke();
        const mid_r = { x: (pointOnSmall.x + largeCenter.x) / 2, y: (pointOnSmall.y + largeCenter.y) / 2 };
        const angle_r = Math.atan2(pointOnSmall.y - largeCenter.y, pointOnSmall.x - largeCenter.x);
        ctx.save();
        ctx.translate(mid_r.x, mid_r.y);
        ctx.rotate(angle_r);
        ctx.fillText('r', -10, -10);
        ctx.restore();

        // Line 'b'
        ctx.beginPath();
        ctx.moveTo(largeCenter.x, largeCenter.y);
        ctx.lineTo(pointOnLarge.x, pointOnLarge.y);
        ctx.stroke();
        const mid_b = { x: (pointOnLarge.x + largeCenter.x) / 2, y: (pointOnLarge.y + largeCenter.y) / 2 };
        const angle_b = Math.atan2(pointOnLarge.y - largeCenter.y, pointOnLarge.x - largeCenter.x);
        ctx.save();
        ctx.translate(mid_b.x, mid_b.y);
        ctx.rotate(angle_b);
        ctx.fillText('b', -10, -10);
        ctx.restore();

        // Third side of the triangle
        ctx.beginPath();
        ctx.moveTo(pointOnSmall.x, pointOnSmall.y);
        ctx.lineTo(pointOnLarge.x, pointOnLarge.y);
        ctx.stroke();

        // --- Draw Angle theta ---
        const arcRadius = 35;
        ctx.beginPath();
        ctx.arc(smallCenter.x, smallCenter.y, arcRadius, 0, -angleOnSmallCircle, true);
        ctx.stroke();
        const thetaLabelAngle = -angleOnSmallCircle / 2;
        ctx.fillText('θ', smallCenter.x + (arcRadius + 12) * Math.cos(thetaLabelAngle), smallCenter.y + (arcRadius + 12) * Math.sin(thetaLabelAngle) + 8);

        // --- Draw Label 'c' ---
        const c_label_y = largeCenter.y + 25;
        const c_label_x_mid = (smallCenter.x + largeCenter.x) / 2;
        ctx.fillText('c', c_label_x_mid - 5, c_label_y + 8);
        
        ctx.beginPath();
        // Line from 'c' to left center
        ctx.moveTo(c_label_x_mid - 15, c_label_y);
        ctx.lineTo(smallCenter.x + 5, c_label_y);
        // Arrowhead left
        ctx.moveTo(smallCenter.x + 10, c_label_y - 4);
        ctx.lineTo(smallCenter.x + 5, c_label_y);
        ctx.lineTo(smallCenter.x + 10, c_label_y + 4);
        ctx.stroke();

        ctx.beginPath();
        // Line from 'c' to right center
        ctx.moveTo(c_label_x_mid + 15, c_label_y);
        ctx.lineTo(largeCenter.x - 5, c_label_y);
        // Arrowhead right
        ctx.moveTo(largeCenter.x - 10, c_label_y - 4);
        ctx.lineTo(largeCenter.x - 5, c_label_y);
        ctx.lineTo(largeCenter.x - 10, c_label_y + 4);
        ctx.stroke();

        // --- Draw Figure Caption ---
        ctx.font = 'bold 20px Times New Roman';
        ctx.fillStyle = 'black';
        ctx.fillText('Fig. 1.32', c_label_x_mid - 25, largeCenter.y + largeRadius + 60);
    </script>
</body>
</html>